<template>
	<view class='productSort' :style="'height:'+winHeight+'px'">
		<view class='header acea-row row-center-wrapper'>
			<navigator url="/pages/columnGoods/goods_search/index" class='acea-row row-between-wrapper input' hover-class="none">
				<text class='iconfont icon-sousuo'></text>
				<view class="input-box">点击搜索商品信息</view>
			</navigator>
		</view>
		<view class="con-box">
			<view class='aside'>
				<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true' :scroll-into-view="intoindex">
					<block  v-for="(item,index) in productList">
						<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-if='item.children && item.children.length > 0'
						 :key="item.store_category_id" @click='tap(index,"b"+index)' :id='"sort"+index'><text class="item_text">{{item.cate_name}}</text>
						 </view>
					</block>
				</scroll-view>
			</view>
			<view class='conter'>
				<scroll-view scroll-y="true" :scroll-into-view="toView" style="height: 100%; overflow: hidden;"  scroll-with-animation='true'>
					<!-- @scroll="scroll" -->
					<view v-for="(p,i) in productList" v-if="toView=='b'+i" :id="'b'+i">
						<view class='listw'  v-for="(item,index) in p.children" :key="item.store_category_id">
							<view class='title acea-row'>
								<view class='name'>{{item.cate_name}}</view>
							</view>
							<view class='list acea-row'>
								<block v-for="(itemn,indexn) in item.children" :key="itemn.store_category_id">
									<!-- :url='"/pages/columnGoods/goods_list/index"+itemn.id+"&title="+itemn.cate_name' -->
									<!-- :url="'/pages/columnGoods/goods_list/index?id='+itemn.store_category_id+'&title='+itemn.cate_name" -->
									<navigator hover-class='none' :url='"/pages/columnGoods/goods_list/index?id="+itemn.store_category_id+"&title="+itemn.cate_name'
									 class='item acea-row row-column row-middle'>
										<view class='picture'>
											<image :src='itemn.pic'></image>
										</view>
										<view class='name line1'>{{itemn.cate_name}}</view>
										
									</navigator>
								</block>
							</view>
						</view>
					</view>
					<view :style='"height:"+(height-300)+"rpx;"'></view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	let app = getApp();
	import {
		getCategoryList
	} from '@/api/store.js';
	export default {
		data() {
			let active = 0;
			// #ifdef H5
			active = location.hash.substr(1);
			// #endif
			return {
				navlist: [],
				productList: [],
				navActive: 0,
				activceCate: active,
				number: "",
				height: 0,
				hightArr: [],
				toView: "",
				winHeight: 0,
				pidIndex: 0,
				intoindex: ""
			}
		},
		watch:{
			navActive(n){
			// #ifdef H5
			history.replaceState(null, null, "#" + this.productList[n].store_category_id);
			// #endif
			}
		},
		onLoad(options) {
			let that = this
			 
			if(options.activceCate){
				this.activceCate = options.activceCate;
			}

			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});

			// #ifdef H5
			document.body.addEventListener('touchmove', function(event) {
				if (that.$route.path == '/pages/goods_cate/goods_cate') {
					event.preventDefault();
				}
			}, {
				passive: false
			});
			// #endif
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				path: '/pages/goods_cate/goods_cate?activceCate=' + this.productList[this.navActive] ? this.productList[this.navActive].store_category_id : 0
			}
		},
		onShareTimeline: function() {
			return {
				query: {
					activceCate: this.productList[this.navActive] ? this.productList[this.navActive].store_category_id : 0,
				}
			}
		},
		// #endif
		onShow() {
			if (!this.productList.length) {
				this.getAllCategory();
			}
		},
		onHide() {},
		//点击底部tabbar调用
		onTabItemTap() {
			this.getAllCategory();
		},
		onReady() {
			// setTimeout(res=>{
			// 	this.intoindex = "sort13"
			// },2000)
		},
		methods: {
			infoScroll: function() {
				let that = this;
				//this.number = that.productList[len - 1].children.length;
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let hightArr = [];
				for (let i = 0; i < that.productList.length; i++) {
					// console.log(i,'iiii')
					if(!that.productList[i].children){
						continue;	
					}
					let query = uni.createSelectorQuery().in(this);
						let idView = "#b" + i;
						// console.log(idView)
						query.select(idView).boundingClientRect();
						query.exec(function(res) {
							// console.log(res)
							// if(res.length > 0) {
							// 	let top = res[0].top;
							// 	hightArr.push({top,i});
							// }
							
						});
					// for (let j = 0; j < that.productList[i].children.length; j++) {
					// 	//获取元素所在位置
					// 	let query = uni.createSelectorQuery().in(this);
					// 	let idView = "#b" + i + j;
					// 	console.log(idView)
					// 	query.select(idView).boundingClientRect();
					// 	query.exec(function(res) {
					// 		let top = res[0].top;
					// 		hightArr.push({top,i});
					// 	});
					// };
				};
				console.log(hightArr,'hightArr')
				that.hightArr = hightArr;
			},
			tap: function(index, id) {
				console.log(index, id)
				this.toView = ''+id;
				this.navActive = index;
			},
			getAllCategory: function() {
				let that = this;
				let value = "" 	
				that.pidIndex = 0;
				getCategoryList().then(res => {
					
					// var proCatelist = [...res.data[0].children,...res.data[1].children]
					var proCatelist = []
					for(var key of res.data){
						console.log(key)
						// key.children.sort((a,b)=>{
						// 	return a.sort-b.sort
						// })
						// console.log(sotrArr,88)
						if(key.is_show==1){
							proCatelist=proCatelist.concat(key.children)
						}
					}
					console.log(proCatelist,9999)
					console.log(res.data)
					// that.productList = res.data;
					that.productList = proCatelist
					that.getCateFrom(that.productList)
					that.$nextTick(function(){
						that.infoScroll();
						setTimeout(()=>that.tap(that.pidIndex, 'b' + that.pidIndex),500);
					})
					that.activceCate = 0;
					that.intoindex = ""
					uni.removeStorageSync('storeIndex')
				})
			},
			//获取首页分类来源
			getCateFrom: function(arr) {
				let pid = uni.getStorageSync('storeIndex')
				let i = ""
				arr.map((item, index) => {
					if ((this.activceCate && item.store_category_id == this.activceCate) || item.store_category_id == pid) {
						this.pidIndex = index
						i = 'sort' + index
						// this.intoindex = 'sort'+index
						return;
					}
				})
				this.$nextTick(() => {
					this.intoindex = i
				})

			},
			scroll: function(e) {
				console.log("234")
				let scrollTop = e.detail.scrollTop + 10;  // 滚动的距离
				let scrollArr = this.hightArr;
				console.log(e.detail.scrollTop,this.hightArr)
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1].top - scrollArr[0].top) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i].top - scrollArr[0].top && scrollTop < (scrollArr[i + 1] ? scrollArr[i + 1].top : 0) - scrollArr[0].top) {
						console.log(scrollArr[i].i,"navActive1")
						this.navActive = scrollArr[i].i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1].top - scrollArr[0].top) {
						console.log(scrollArr)
						console.log(scrollArr[scrollArr.length - 1].i,"navActive2")
						// this.navActive = scrollArr[scrollArr.length - 1].i
					}
				}
				// console.log(this.navActive,'navActive')
			},
			searchSubmitValue: function(e) {
				if (this.$util.trim(e.detail.value).length > 0)
					uni.navigateTo({
						url: '/pages/columnGoods/goods_list/index?searchValue=' + e.detail.value
					})
				else
					return this.$util.Tips({
						title: '请填写要搜索的产品信息'
					});
			},
		}
	}
</script>


<style scoped lang="scss">
	.productSort {
		display: flex;
		flex-direction: column;
		width: 100%;

		.con-box {
			flex: 1;
			display: flex;
			overflow: hidden;
		}
	}

	.productSort .header {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productSort .header .input .placeholder {
		color: #999;
	}

	.productSort .header .input .input-box {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		height: 100%;
		width: 597rpx;
		color: #999999;
	}

	.productSort .aside {
		background-color: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		width: 200rpx;
		height: 100%;
		overflow: hidden;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}

	.productSort .aside .item_text {
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.productSort .aside .item_text .text {}

	.productSort .aside .item.on {
		background-color: #f7f7f7;
		border-left: 4rpx solid #fc4141;
		width: 100%;
		text-align: center;
		color: #fc4141;
		font-weight: bold;
	}

	.productSort .conter {
		flex: 1;
		height: 100%;
		padding: 0 14rpx;
		background-color: #f7f7f7;
	}

	.productSort .conter .listw {
		// padding-top: 20rpx;
	}

	.productSort .conter .listw .title {
		height: 100rpx;
		align-items: center;
	}

	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.productSort .conter .list {
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 26rpx;
	}

	.productSort .conter .list .item {
		width: 174rpx;
		margin-top: 26rpx;
	}

	.productSort .conter .list .item .picture {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
	}

	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
</style>
